<script setup>
import {onMounted, onUnmounted, ref} from "vue";
  import { ElMessage } from "element-plus";
  import { useStore } from "@/store/index.js";
  import authorizationApi from "@/api/authorization/authorization.js";
  import router from "@/router/index.js";
  import SecurityUtil from "@/utils/SecurityUtil.js";
  import ObjectUtil from "@/utils/ObjectUtil.js";
  import ResponseUtil from "@/utils/ResponseUtil.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";

  const store = useStore();

  const data = ref({
    account: '',
    password: '',
    loginType: 1
  })

  let loading = ref(false);

  onMounted(() => {
    // 绑定全局监听事件
    window.addEventListener('keydown', handleKeydown);
  })

  onUnmounted(() => {
    // 销毁全局监听事件
    window.removeEventListener('keydown', handleKeydown);
  })

  const handleKeydown = (e) => {
    // 按下回车键时的处理逻辑
    if (e.keyCode === 13) {
      login();
    }
  }

  const login = () => {

    // 参数校验
    if (!checkParam()) return;

    // 提交按钮进入加载
    loading.value = true;

    // 清除对象关联并赋值
    let request = ObjectUtil.clearRef(data.value);

    // 密码非对称加密传输
    request.password = SecurityUtil.encrypt(data.value.password);

    // 向服务器发起请求
    authorizationApi.login(request).then(response => {
      // 提交按钮加载结束
      loading.value = false;

      ResponseUtil.data(response).dispose(response => {
        if (response.code === '200') {
          // 登录成功，将授权凭证存储到缓存状态库中
          store.user.authorization = response.data.authorization;
          store.user.info = response.data.info;

          // console.log(store.user.info)

          // 同时存储到本地 localStore 缓存中，避免丢失
          LocalStoreUtil.setToken(response.data.authorization);
          LocalStoreUtil.setUserInfo(response.data.info);

          // 清除 本地缓存 和 状态库 中的收藏列表数据
          store.collection.collectionList = [];
          LocalStoreUtil.clearCollectList();

          // 进入首页
          router.replace('/');
        }
      })

    })
  }

  const checkParam = () => {
    if (loading.value) {
      return false;
    }

    if (data.value.account === '') {
      ElMessage.error('手机号/邮箱 不能为空！')
      return false;
    }

    if (data.value.password === '') {
      ElMessage.error('密码不能为空！')
      return false;
    }

    return true;
  }

</script>

<template>
  <div class="password-login-basic">
    <input type="text" v-model="data.account" class="input-basic" placeholder="手机号/邮箱" maxlength="20">
    <input type="password" v-model="data.password" class="input-basic" placeholder="密码" maxlength="36">
    <div class="code-login-basic">
      <router-link to="/login/code" class="code-login-link">验证码登录</router-link>
    </div>
    <button class="submit-button-basic" @click="login" v-loading="loading">登录</button>
  </div>
</template>

<style scoped>
  /* 密码登录最外层盒子基础样式 */
  .password-login-basic {
    padding: 2px;
    width: 100%;
  }

  /* 文本框基础样式 */
  .input-basic {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    outline: none;
    border: 1px solid white;
    background-color: rgb(242, 242, 242);
    text-indent: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    transition: border .3s;
  }

  /* 文本框悬浮样式 */
  .input-basic:hover {
    border: 1px solid rgb(217, 217, 217);
  }

  /* 文本框获取焦点样式 */
  .input-basic:focus {
    border: 1px solid rgb(0, 102, 224);
  }

  /* 提交按钮基本样式 */
  .submit-button-basic {
    width: 100%;
    background-color: rgb(0, 102, 204);
    border: none;
    line-height: 42px;
    border-radius: 5px;
    font-size: 15px;
    color: white;
    cursor: pointer;
    transition: background-color .2s;
    margin-top: 10px;
  }

  /* 提交按钮悬浮样式 */
  .submit-button-basic:hover {
    background-color: rgb(0, 112, 224);
  }

  /* 验证码登录外层盒子基础样式 */
  .code-login-basic {
    width: 100%;
    overflow: hidden;
    color: black;
    display: flex;
    justify-content: right;
    position: relative;
    top: -5px;
  }

  /* 验证码登录跳转链接样式 */
  .code-login-link {
    color: rgb(38, 38, 38);
    font-size: 13px;
    transition: all .3s;
    text-decoration: none;
  }
  .code-login-link:hover {
    color: rgb(0, 112, 224);
  }

</style>